// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use '../utils' as cp;
@use 'sass:color';

@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
@use '../../protocol/components/video';

// Header with video
.c-careers-video-hero {
    position: relative;

    .c-video-wrapper {
        align-items: center;
        background-color: cp.$blue-primary;
        display: flex;
        height: 100%;
        justify-content: center;
        position: relative;

        .overlay {
            background-color: rgba(255, 255, 255, 0.9);
            content: '';
            display: block;
            height: 100%;
            left: 0;
            pointer-events: none;
            position: absolute;
            top: 0;
            width: 100%;
            z-index: 10;
        }

        .mzp-c-split {
            z-index: 20;

            .mzp-c-split-body {
                h1 {
                    color: $color-black;
                }
            }
        }
    }

    &.t-hero-home .c-video-wrapper {
        background: cp.$teal-primary url('/media/img/careers/hero-bg-home.jpg') center center no-repeat;
        background-size: cover;
    }

    &.t-hero-diversity .c-video-wrapper {
        background: cp.$teal-primary url('/media/img/careers/hero-bg-diversity.jpg') center center no-repeat;
        background-size: cover;
    }
}
